<template>
  <div>
    <div class="message_info">
      <div class="message_title">
        <img src="../assets/images/right_arrow.png" />
        <span>信访举报</span>
      </div>
      <div class="message_content" id="xinfangAmount" style="height:280px;margin-top:-20px"></div>
      <div class="report">
       
        <div
          style="width:100px;height:100px;border-radius:50%;position: absolute;color: #eee ;top:149px;left:39%;text-align: center;"
        >
          <div style="font-size:14px;">累计</div>
          <div style="font-size:30px;font-weight:bold;color:rgba(200,200,82,1);">{{total}}</div>
        </div>
        <div
          style="height:100px;border-radius:50%;position: absolute;color: #eee ;top:283px;left:9%;text-align: center; display: flex;"
        >
          <div style="display: flex;height:30px;align-items:center;">
            <div
              style="font-size:10px;border-left:5px solid #31AAF5;padding-left:5px;color:#fff;height:14px;line-height:14px"
            >有效举报</div>
            <div
              style="font-size:28px;color:#31AAF5;margin-left:5px;height:28px;line-height:28px"
            >{{valid}}</div>
          </div>
          <div style="display: flex;height:30px;align-items:center; margin-left:41px">
            <div
              style="font-size:10px;border-left:5px solid #0FE589;padding-left:5px;color:#fff;height:14px;line-height:14px"
            >受理率</div>
            <div
              style="font-size:28px;color:#0FE589;margin-left:5px;height:28px;line-height:28px"
            >{{validRate}}%</div>
          </div>
          <div style="display: flex;height:30px;align-items:center; margin-left:41px">
            <div
              style="font-size:10px;border-left:5px solid #CCA240;padding-left:5px;color:#fff;height:14px;line-height:14px"
            >累计总量</div>
            <div
              style="font-size:28px;color:#CCA240;margin-left:5px;height:28px;line-height:28px"
            >{{total}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import _ from "lodash";
export default {
  data() {
    return {
      total: "",
      qrCode: "",
      valid: "",
      validRate: "",
      webPage: "",
      option: {
        color: ["#0FE589", "#31AAF5"],
        //   legend: {
        //     orient: 'vertical',
        //     left: 30,
        //     data: ['公务接待', '公车费用', '因公出国',]
        //   },
        series: [
          {
            name: "三公经费",
            type: "pie",
            radius: ["50%", "65%"],
            labelLine: {
              normal: {
                length: 0, // 改变标示线的长度
                length2: 30,
                lineStyle: {
                  color: "#0A46F2", // 改变标示线的颜色
                },
              },
              left: 100,
            },
            label: {
              show: true,
              fontSize: "16",

              // formatter: '{b1111|{b}} {d}% ',  //区域名称用b1111的样式
              formatter: function (params) {
                return params.name + "\n" + params.percent + "%";
              }, //区域名称用b1111的样式
              rich: {
                st:{
                            backgroundColor:"#F00",
                            color:"#F00",
                            width:40,
                            height:40,
                            borderRadius:20,
                            borderWidth:5,
                            borderColor:"#ff0"
                        }
              },
            },
            // 选中状态样式
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },

            data: [
              { value: 600, name: "二维码举报" },
              { value:300, name: "网上举报" },
            ],
          },
        ],
      },
    };
  },
  created() {},

  mounted() {
    var myChart4 = echarts.init(document.getElementById("xinfangAmount"));
    this.Api.statistic().then((res) => {
      this.total = res.data.total;
      this.qrCode = res.data.qrCode;
      this.valid = res.data.valid;
      this.validRate = res.data.validRate;
      this.webPage = res.data.webPage;
      this.$set( this.option.series[0].data[0],'value',res.data.qrCode);
       this.$set( this.option.series[0].data[1],'value',res.data.webPage);
    myChart4.setOption(this.option);
    });
   
    // 4. 准备数据和配置项
    // const result = _.merge(res.data, this.option)
    // 使用刚指定的配置项和数据显示图表。
    myChart4.setOption(this.option);
  },
};
</script>
<style lang="less" scoped>
.message_info {
  position: relative;
  width: 452px;
  margin: 24px 30px;
  height: 295px;
}
.message_title {
  padding: 6px 0;
  width: 100%;
  height: 45px;
  font-size: 28px;
  font-weight: 500;
  color: #06ffff;
  line-height: 45px;
}

.message_title img {
  height: 24px;
  width: 24px;
}

.message_content {
  margin-top: 10px;
  margin-bottom: 38px;
}
.report {
  margin-top: 20px;
}
</style>